<script setup>
import { userPayOrderService } from '@/apis/order'

const props = defineProps({
	userID: {
		type: Number,
		required: true
	},
	orderID: {
		type: Number,
		required: true
	},
	totalPrice: {
		type: Number,
		required: true
	}
})

const emits = defineEmits(['closePayProp'])

// 点击支付按钮确认支付
const onClickPayBtn = async () => {
	try {
		await userPayOrderService({
			userID: props.userID,
			orderID: props.orderID,
			totalPrice: props.totalPrice
		})

		uni.showToast({
			icon: 'success',
			title: '支付成功',
			success: () => {
				setTimeout(function () {
					emits('closePayProp')
				}, 1000)
			}
		})
	} catch (error) {
		setTimeout(function () {
			uni.reLaunch({
				url: '/UserCenterPackage/Orders/Orders?index=1'
			})
		}, 3000)
	}
}
</script>

<template>
	<view class="container">
		<view class="header">乐游汇智能旅行</view>
		<view class="price-detail">
			<view class="money">￥</view>
			<view class="number">{{ (totalPrice || 0).toFixed(2) }}</view>
		</view>
		<view class="pay-method">
			<view class="title">付款方式</view>
			<view class="right">
				<view class="wallet">我的钱包</view>
				<up-icon name="checkbox-mark" color="#07c160" size="28"></up-icon>
			</view>
		</view>
		<view class="pay-btn" @tap="onClickPayBtn">支付</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50rpx;

	.header {
		font-size: 40rpx;
	}

	.price-detail {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 50rpx 0;

		.money {
			font-size: 50rpx;
		}

		.number {
			font-size: 80rpx;
			font-weight: bold;
		}
	}

	.pay-method {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10rpx;
		color: #818181;
		background-color: #fff5ec;
		padding: 50rpx;
		margin-bottom: 50rpx;

		.right {
			display: flex;
			justify-content: center;
			align-items: center;

			.wallet {
				padding-right: 10rpx;
				font-size: 35rpx;
			}
		}
	}

	.pay-btn {
		width: 60%;
		padding: 30rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
		color: #fff;
		background-color: #07c160;
	}
}
</style>
